
import BaseView from "./baseView.js";

export default class shouye extends BaseView {
    //添加css样式
    renderCss() {
        $("head").append('<link rel="stylesheet" type="text/css" href="css/xuanzuo.css"><link rel="stylesheet" type="text/css" href="css/reset.css">')
    }
    render() {
        this.$el.html(`
        <!-- 头部 -->
        <header>
            <nav class="H-nav layout">
                <div class="layout H-left-div">
                    <a href="#/homepages">
                        <p class="log">
                            <span class="text">猫眼电影</span>
                            <span class="beijin"></span>
                            <span class="faguang"></span>
                        </p>
                    </a>
                    <!-- 下级城市选项 -->
                    <div class="layout">
                    <span>成都
                    <ol>
                        <li class="layout">
                            <span>区:</span><a href="">武侯</a><a href="">郫都</a><a href="">双流</a><a href="">金牛</a>
                        </li>
                    </ol>
                </span>
                    </div>
                    <ul class="layout H-link">
                        <li class="layout">
                            <a href="#/homepages">首页</a>
                        </li>
                        <li class="layout">
                            <a href="#/movies">电影</a>
                        </li>
                        <li class="layout">
                            <a href="#/yingyuans">影院</a>
                        </li>
                        <li class="layout">
                            <a href="javascript:;">榜单</a>
                        </li>
                        <li class="layout">
                            <a href="javascript:;">热点</a>
                        </li>
                    </ul>
                </div>
                <div class="H-right-div layout">
                    <form action="">
                        <input type="text" placeholder="找影视剧、影人、影院">
                    </form>
                    <div class="register">
                        <!-- 下级菜单 -->
                        <div>
                            <div class="yuan">
                                <div class="you">
                                </div>
                                <div class="zhongjian">
                                    <p>
                                        <a href="#/logins">登录</a>
                                        <a href="#/dingdans">我的订单</a>
                                    </p>
                                </div>
                                <div class="zuo">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </nav>
        </header>
        <!-- 内容 -->
        <main class="main">
            <section class="schedule layout">
                <p class="layout">
                    <label for="" class="changci"><span class="qishi">1</span>选择影片场次</label>
                    <label for=""><input type="checkbox" id="zu1o14"><span class="xuanzuo">2</span>选择座位</label>
                    <label for=""><input type="checkbox" id="fukuan"><span>3</span>14分钟内付款</label>
                    <label for=""><span>4</span>影院取票观影</label>
                </p>
            </section>
            <article class="layout">
                <!-- 左边 -->
                <section>
                    <ul>
                        <li>
                            <ol class="layout">
                                <li>
                                    <img src="./img/kexuan1.png" alt=""><span>可选座位</span>
                                </li>
                                <li>
                                    <img src="./img/yishou.jpg" alt=""><span>已售座位</span>
                                </li>
                                <li>
                                    <img src="./img/yixuan.jpg" alt=""><span>已选座位</span>
                                </li>
                                <li>
                                    <img src="./img/qinglvzuo.jpg" alt=""><span>情侣座位</span>
                                </li>
                            </ol>
                        </li>
                        <li class="layout tuceng">
                            <img src="./img/tuceng.png" alt="">
                        </li>
                        <li class="regionalism">
                            <h1>银幕中央</h1>
    
                            <div class="layout">
                                <ul>
                                    <li>1</li>
                                    <li>2</li>
                                    <li>3</li>
                                    <li>4</li>
                                    <li>5</li>
                                    <li>6</li>
                                    <li>7</li>
                                    <li>8</li>
                                    <li>9</li>
                                </ul>
                                <!-- 选座位 -->
                                <table>
                                    <tbody id="show">
                                        <tr>
                                            <td colspan="5" class="zw1"><label for="zuo14"><input type="checkbox"
                                                        id="zuo14" class="1-1"><span></span></label>
                                            </td>
                                            <td><label for="zuo16"><input type="checkbox" id="zuo16" class="1-2"><span></span></label>
                                            </td>
                                            <td><label for="zuo17"><input type="checkbox" id="zuo17" class="1-3"><span></span></label>
                                            </td>
                                            <td><label for="zuo18"><input type="checkbox" id="zuo18" class="1-4"><span></span></label>
                                            </td>
                                            <td><label for="zuo19"><input type="checkbox" id="zuo19" class="1-5"><span></span></label>
                                            </td>
                                            <td><label for="zuo10"><input type="checkbox" id="zuo10" class="1-6"><span></span></label>
                                            </td>
                                            <td><label for="zuo111"><input type="checkbox" id="zuo111" class="1-7"><span></span></label>
                                            </td>
                                            <td><label for="zuo112"><input type="checkbox" id="zuo112" class="1-8"><span></span></label>
                                            </td>
                                            <td colspan="3"><label for="zuo113"><input type="checkbox"
                                                        id="zuo113" class="1-9"><span></span></label></td>
                                        </tr>
                                        <tr>
                                            <td><label for="zuo1"><input type="checkbox" id="zuo1" class="2-1"><span></span></label>
                                            </td>
                                            <td><label for="zuo2"><input type="checkbox" id="zuo2" class="2-2"><span></span></label>
                                            </td>
                                            <td><label for="zuo3"><input type="checkbox" id="zuo3" class="2-3"><span></span></label>
                                            </td>
                                            <td><label for="zuo4"><input type="checkbox" id="zuo4" class="2-4"><span></span></label>
                                            </td>
                                            <td><label for="zuo5"><input type="checkbox" id="zuo5" class="2-5"><span></span></label>
                                            </td>
                                            <td><label for="zuo6"><input type="checkbox" id="zuo6" class="2-6"><span></span></label>
                                            </td>
                                            <td><label for="zuo7"><input type="checkbox" id="zuo7" class="2-7"><span></span></label>
                                            </td>
                                            <td><label for="zuo8"><input type="checkbox" id="zuo8" class="2-8"><span></span></label>
                                            </td>
                                            <td><label for="zuo9"><input type="checkbox" id="zuo9" class="2-9"><span></span></label>
                                            </td>
                                            <td><label for="zuo0"><input type="checkbox" id="zuo0" class="2-10"><span></span></label>
                                            </td>
                                            <td><label for="zuo11"><input type="checkbox" id="zuo11" class="2-11"><span></span></label>
                                            </td>
                                            <td><label for="zuo12"><input type="checkbox" id="zuo12" class="2-12"><span></span></label>
                                            </td>
                                            <td colspan="3"><label for="zuo13"><input type="checkbox"
                                                        id="zuo13" class="2-13"><span></span></label></td>
                                        </tr>
                                        <tr>
                                            <td><label for="z11uo1"><input type="checkbox" id="z11uo1" class="3-1"><span></span></label>
                                            </td>
                                            <td><label for="z11uo2"><input type="checkbox" id="z11uo2" class="3-2"><span></span></label>
                                            </td>
                                            <td><label for="z11uo3"><input type="checkbox" id="z11uo3" class="3-3"><span></span></label>
                                            </td>
                                            <td><label for="z11uo4"><input type="checkbox" id="z11uo4" class="3-4"><span></span></label>
                                            </td>
                                            <td><label for="z11uo5"><input type="checkbox" id="z11uo5" class="3-5"><span></span></label>
                                            </td>
                                            <td><label for="z11uo6"><input type="checkbox" id="z11uo6" class="3-6"><span></span></label>
                                            </td>
                                            <td><label for="z11uo7"><input type="checkbox" id="z11uo7" class="3-7"><span></span></label>
                                            </td>
                                            <td><label for="z11uo8"><input type="checkbox" id="z11uo8" class="3-8"><span></span></label>
                                            </td>
                                            <td><label for="z11uo9"><input type="checkbox" id="z11uo9" class="3-9"><span></span></label>
                                            </td>
                                            <td><label for="z11uo0"><input type="checkbox" id="z11uo0" class="3-10"><span></span></label>
                                            </td>
                                            <td><label for="z11uo11"><input type="checkbox" id="z11uo11" class="3-11"><span></span></label>
                                            </td>
                                            <td><label for="z11uo12"><input type="checkbox" id="z11uo12" class="3-12"><span></span></label>
                                            </td>
                                            <td colspan="3"><label for="zu1o13"><input type="checkbox"
                                                        id="zu1o13" class="3-13"><span></span></label></td>
                                        </tr>
                                        <tr>
                                            <td><label for="zu22o1"><input type="checkbox" id="zu22o1" class="4-1"><span></span></label>
                                            </td>
                                            <td><label for="zu22o2"><input type="checkbox" id="zu22o2" class="4-2"><span></span></label>
                                            </td>
                                            <td><label for="zu22o3"><input type="checkbox" id="zu22o3" class="4-3"><span></span></label>
                                            </td>
                                            <td><label for="zu22o4"><input type="checkbox" id="zu22o4" class="4-4"><span></span></label>
                                            </td>
                                            <td><label for="zu22o5"><input type="checkbox" id="zu22o5" class="4-5"><span></span></label>
                                            </td>
                                            <td><label for="zu22o6"><input type="checkbox" id="zu22o6" disabled class="4-6"><span
                                                        class="yixuan1"></span></label>
                                            </td>
                                            <td><label for="zu22o7"><input type="checkbox" id="zu22o7" disabled class="4-7"><span
                                                        class="yixuan1"></span></label>
                                            </td>
                                            <td><label for="zu22o8"><input type="checkbox" id="zu22o8" class="4-8"><span></span></label>
                                            </td>
                                            <td><label for="zu22o9"><input type="checkbox" id="zu22o9" class="4-9"><span></span></label>
                                            </td>
                                            <td><label for="zu22o0"><input type="checkbox" id="zu22o0" class="4-10"><span></span></label>
                                            </td>
                                            <td colspan="3"><label for="zu22o11"><input type="checkbox"
                                                        id="zu22o11" class="4-11"><span></span></label>
                                            </td>
                                            <td><label for="zu22o12"><input type="checkbox" id="zu22o12" disabled><span
                                                        class="yixuan1" class="4-12"></span></label>
                                            </td>
                                            <td><label for="zu22o13"><input type="checkbox" id="zu22o13" class="4-13"><span></span></label>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td><label for="zuo21"><input type="checkbox" id="zuo21" class="5-1"><span></span></label>
                                            </td>
                                            <td><label for="zuo22"><input type="checkbox" id="zuo22" disabled class="5-2"><span
                                                        class="yixuan1"></span></label>
                                            </td>
                                            <td><label for="zuo23"><input type="checkbox" id="zuo23" class="5-3"><span></span></label>
                                            </td>
                                            <td><label for="zuo24"><input type="checkbox" id="zuo24" class="5-4"><span></span></label>
                                            </td>
                                            <td><label for="zuo25"><input type="checkbox" id="zuo25" class="5-5"><span></span></label>
                                            </td>
                                            <td><label for="zuo26"><input type="checkbox" id="zuo26" class="5-6"><span></span></label>
                                            </td>
                                            <td><label for="zuo27"><input type="checkbox" id="zuo27" class="5-7"><span></span></label>
                                            </td>
                                            <td><label for="zuo28"><input type="checkbox" id="zuo28" class="5-8"><span></span></label>
                                            </td>
                                            <td><label for="zuo29"><input type="checkbox" id="zuo29" class="5-9"><span></span></label>
                                            </td>
                                            <td><label for="zuo20"><input type="checkbox" id="zuo20" class="5-10"><span></span></label>
                                            </td>
                                            <td colspan="3"><label for="zuo211"><input type="checkbox"
                                                        id="zuo211" class="5-11"><span></span></label>
                                            </td>
                                            <td><label for="zuo212"><input type="checkbox" id="zuo212" class="5-12"><span></span></label>
                                            </td>
                                            <td><label for="zuo213"><input type="checkbox" id="zuo213" class="5-13"><span></span></label>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td><label for="zuo31"><input type="checkbox" id="zuo31" class="6-1"><span></span></label>
                                            </td>
                                            <td><label for="zuo32"><input type="checkbox" id="zuo32" class="6-2"><span></span></label>
                                            </td>
                                            <td><label for="zuo33"><input type="checkbox" id="zuo33" class="6-3"><span></span></label>
                                            </td>
                                            <td><label for="zuo34"><input type="checkbox" id="zuo34" disabled class="6-4"><span
                                                        class="yixuan1"></span></label>
                                            </td>
                                            <td><label for="zuo35"><input type="checkbox" id="zuo35" disabled class="6-5"><span
                                                        class="yixuan1"></span></label>
                                            </td>
                                            <td><label for="zuo36"><input type="checkbox" id="zuo36" class="6-6"><span></span></label>
                                            </td>
                                            <td><label for="zuo37"><input type="checkbox" id="zuo37" class="6-7"><span></span></label>
                                            </td>
                                            <td><label for="zuo38"><input type="checkbox" id="zuo38" class="6-8"><span></span></label>
                                            </td>
                                            <td><label for="zuo39"><input type="checkbox" id="zuo39" class="6-9"><span></span></label>
                                            </td>
                                            <td><label for="zuo30"><input type="checkbox" id="zuo30" class="6-10"><span></span></label>
                                            </td>
                                            <td colspan="3"><label for="zuo311"><input type="checkbox"
                                                        id="zuo311" class="6-11"><span></span></label>
                                            </td>
                                            <td><label for="zuo312"><input type="checkbox" id="zuo312" class="6-12"><span></span></label>
                                            </td>
                                            <td><label for="zuo313"><input type="checkbox" id="zuo313" class="6-13"><span></span></label>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td><label for="zuo41"><input type="checkbox" id="zuo41" class="7-1"><span></span></label>
                                            </td>
                                            <td><label for="zuo42"><input type="checkbox" id="zuo42" class="7-2"><span></span></label>
                                            </td>
                                            <td><label for="zuo43"><input type="checkbox" id="zuo43" class="7-3"><span></span></label>
                                            </td>
                                            <td><label for="zuo44"><input type="checkbox" id="zuo44" class="7-4"><span></span></label>
                                            </td>
                                            <td><label for="zuo45"><input type="checkbox" id="zuo45" class="7-5"><span></span></label>
                                            </td>
                                            <td><label for="zuo46"><input type="checkbox" id="zuo46" class="7-6"><span></span></label>
                                            </td>
                                            <td><label for="zuo47"><input type="checkbox" id="zuo47" class="7-7"><span></span></label>
                                            </td>
                                            <td><label for="zuo48"><input type="checkbox" id="zuo48" class="7-8"><span></span></label>
                                            </td>
                                            <td><label for="zuo49"><input type="checkbox" id="zuo49" class="7-9"><span></span></label>
                                            </td>
                                            <td><label for="zuo40"><input type="checkbox" id="zuo40" class="7-10"><span></span></label>
                                            </td>
                                            <td colspan="3"><label for="zuo411"><input type="checkbox"
                                                        id="zuo411" class="7-11"><span></span></label>
                                            </td>
                                            <td><label for="zuo412"><input type="checkbox" id="zuo412" class="7-12"><span></span></label>
                                            </td>
                                            <td><label for="zuo413"><input type="checkbox" id="zuo413" class="7-13"><span></span></label>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td><label for="zuo51"><input type="checkbox" id="zuo51" class="8-1"><span></span></label>
                                            </td>
                                            <td><label for="zuo52"><input type="checkbox" id="zuo52" class="8-2"><span></span></label>
                                            </td>
                                            <td><label for="zuo53"><input type="checkbox" id="zuo53" class="8-3"><span></span></label>
                                            </td>
                                            <td><label for="zuo54"><input type="checkbox" id="zuo54" class="8-4"><span></span></label>
                                            </td>
                                            <td><label for="zuo55"><input type="checkbox" id="zuo55" class="8-5"><span></span></label>
                                            </td>
                                            <td><label for="zuo56"><input type="checkbox" id="zuo56" class="8-6"><span></span></label>
                                            </td>
                                            <td><label for="zuo57"><input type="checkbox" id="zuo57" class="8-7"><span></span></label>
                                            </td>
                                            <td><label for="zuo58"><input type="checkbox" id="zuo58" class="8-8"><span></span></label>
                                            </td>
                                            <td><label for="zuo59"><input type="checkbox" id="zuo59" class="8-9"><span></span></label>
                                            </td>
                                            <td><label for="zuo50"><input type="checkbox" id="zuo50" class="8-10"><span></span></label>
                                            </td>
                                            <td colspan="3"><label for="zuo513"><input type="checkbox"
                                                        id="zuo513" class="8-11"><span></span></label></td>
                                            <td><label for="zuo514"><input type="checkbox" id="zuo514" class="8-12"><span></span></label>
                                            </td>
                                            <td><label for="zuo515"><input type="checkbox" id="zuo515" class="8-13"><span></span></label>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td colspan="2" class="zw2"><label for="zuo62"><input type="checkbox"
                                                        id="zuo62" class="9-1"><span></span></label>
                                            </td>
                                            <td><label for="zuo63"><input type="checkbox" id="zuo63" class="9-2"><span></span></label>
                                            </td>
                                            <td><label for="zuo64"><input type="checkbox" id="zuo64" class="9-3"><span></span></label>
                                            </td>
                                            <td><label for="zuo65"><input type="checkbox" id="zuo65" class="9-4"><span></span></label>
                                            </td>
                                            <td><label for="zuo66"><input type="checkbox" id="zuo66" class="9-5"><span></span></label>
                                            </td>
                                            <td><label for="zuo67"><input type="checkbox" id="zuo67" class="9-6"><span></span></label>
                                            </td>
                                            <td><label for="zuo68"><input type="checkbox" id="zuo68" class="9-7"><span></span></label>
                                            </td>
                                            <td><label for="zuo69"><input type="checkbox" id="zuo69" class="9-8"><span></span></label>
                                            </td>
                                            <td><label for="zuo60"><input type="checkbox" id="zuo60" class="9-9"><span></span></label>
                                            </td>
                                            <td><label for="zuo611"><input type="checkbox" id="zuo611" class="9-10"><span></span></label>
                                            </td>
                                            <td><label for="zuo612"><input type="checkbox" id="zuo612" class="9-11"><span></span></label>
                                            </td>
                                            <td><label for="zuo613"><input type="checkbox" id="zuo613" class="9-12"><span></span></label>
                                            </td>
                                            <td><label for="zuo614"><input type="checkbox" id="zuo614" class="9-13"><span></span></label>
                                            </td>
                                            <td><label for="shuzi2"><span></span></label>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </li>
                    </ul>
                </section>
                <!-- 右边 -->
                <aside>
                    <div class="aside-one">
                        <ul class="ul1">
                            
                        </ul>
                    </div>
                    <div class="aside-two">
                        <ul>
                            <li>
                                <p class="zuowei">
                                    座位:一次最多选4个座位
                                </p>
                            </li>
                            <li>
                                <p>
                                    请<span>点击左侧</span>座位图选择座位
                                </p>
                            </li>
                            <!-- 控制进度 -->
                            <li class="layout">
                                <p>
                                    总价: <span class="zongjia">￥</span><input type="radio" id="shuzi2"><span class="shuzi"></span>
                                </p>
                                <label for="fukuan" class="fuqian">确认选座</label>
                            </li>
                        </ul>
                    </div>
                    <!-- 控制进度 -->
                    <div class="aside-there">
                        <ul>
                            <li>
                                <p><span></span>186****2738</p>
                            </li>
                            <li class="layout">
                                <label for="zu1o14" id="pay">确认付款</label>
                            </li>
                        </ul>
                    </div>
                </aside>
    
            </article>
        </main>
        <!-- 底部 -->
        <footer>
            <nav>
                <ul class="layout">
                     <li>
                        <a href="#/homepages">关于我们</a>
                    </li>
                    <li>
                        <a href="#/homepages">管理团队</a>
                    </li>
                    <li>
                        <a href="#/homepages">投资者关系</a>
                    </li>
                    <li>
                        <a href="#/homepages">美团网</a>
                    </li>
                    <li>
                        <a href="#/homepages">格瓦拉</a>
                    </li>
                    <li>
                        <a href="#/homepages">美团下载</a>
                    </li>
                </ul>
            </nav>
            <p>商务合作邮箱：v@maoyan.com客服电话：10105335违法和不良信息举报电话：4006018900</p>
            <p>北京猫眼文化传媒有限公司</p>
        </footer>
        `)
    }
    handle() {
        //获取url参数
        function aa(qs) {
            var s = location.href;
            s = s.replace("?", "?&").split("&");
            var re = "";
            for (let i = 1; i < s.length; i++) {
                if (s[i].indexOf(qs + "=") == 0) {
                    re = s[i].replace(qs + "=", "")
                }
            } 
            return re
        }
        let movieId = aa("movieid")
        let yingyuanId = aa("yingyuanid")
        //渲染电影信息
        $.ajax({
            type: "post",
            url: "/api/platoon/getamovie",
            data: {
                movieid: movieId
            },
            dataType: "json",
            success(data) {
                let str = `
                <li class="layout">
                <img src="http://127.0.0.1:4000/photos/${data[0].images[0]}" alt="">
                <div>
                    <h1>${data[0].cname}</h1>
                    <p><span>类型:</span>${data[0].type}</p>
                    <p><span>时长:</span>${data[0].time}分钟</p>
                </div>
                </li>
                <li>
                <p><span>影院:</span>万达影城（双流万达广场杜比影院店）</p>
                <p><span>影厅:</span>VIP厅（儿童需购票）</p>
                <p><span>版本:</span>粤语2D</p>
                <p class="significance"><span>场次:</span>今天 8月13 15:50</p>
                <p><span>票价:</span>￥39/张</p>
                </li>
            `
                $(".ul1").html(str)
            }
        })
        //选坐
        let xuan = [];
        $("#show").on('click', 'input[type="checkbox"]', (e) => {
            //console.log(e.target.checked,e.target.id);
            if (e.target.checked) {
                //大于4个位置给出提示，并把选中状态改了false
                if (xuan.length < 4) {
                    //把选中的添加到数组中
                    xuan.push(e.target.className);
                } else {
                    alert('最多选4个座位')
                    e.target.checked = false;
                }
            } else {
                //得到该元素的下标
                let index = xuan.indexOf(e.target.id);
                //删除该元素 
                xuan.splice(index, 1);
            }
            //渲染总价
            $(".zongjia").html(`￥${xuan.length * 39}`)
            //渲染座位
            let str = ""
            xuan.forEach(item => {
                str += `
                    <span style="font-size:16px;color:red;border:1px solid black;padding:5px;border-radius: 10px">${item}</span>
                 `
            })
            $(".zuowei").html(str)
        })
        //确认选坐
        $(".fuqian").on("click", function () {
            $("#shuzi2").prop("checked", "checked")
        })
        //确认付钱
        $("#pay").on("click", function () {
            if ($("#shuzi2").prop("checked") == true && xuan.length != 0) {
                alert("付款成功");
                window.location.hash = `#/dingdan`
            } else {
                alert("请确认选坐")
            }
        })

    }
}